<template>
  <el-container class="publishOperator">
    <el-header class="top_header"
      ><el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
          <div class="left_title">
            <el-button type="info" size="mini" style="background-color: #eceef4"
              >python3</el-button
            >
            <el-button
              type="info"
              size="mini"
              style="background-color: transparent"
              >notebook</el-button
            >
          </div>
        </el-col>
        <el-col :span="15">
          <div class="tabs_btn">
            <el-button v-for="item in tabs" :key="item.id" @click="goSZ(item)"
              >{{ item.val }}
              <span class="img_wrapper">
                <img :src="item.icon" width="100%" />
              </span>
            </el-button>
          </div>
        </el-col> </el-row
    ></el-header>
    <el-container>
      <el-container width="60%" class="left_container">
        <el-main class="dataMain">
          <el-header style="line-height: 60px">
            <div class="icon_container">
              <div class="icon icon_left">
                <div class="icon_style" style="width: 18px; height: 18px">
                  <img src="../assets/img/xz.png" alt="" />
                </div>
                <el-button
                  type="info"
                  size="mini"
                  style="margin-left: 8px; line-height: 20px"
                  >code markdown</el-button
                >
              </div>
              <div class="icon icon_center">
                <div class="icon_style">
                  <img src="../assets/img/del.png" alt="" />
                </div>
                <div class="icon_style tm">
                  <img src="../assets/img/11-上.png" alt="" />
                </div>
                <div class="icon_style ts">
                  <img src="../assets/img/12-下.png" alt="" />
                </div>
              </div>
              <div class="icon icon_right">
                <div class="icon_style tm">
                  <img src="../assets/img/14-暂停.png" alt="" />
                </div>
                <div class="icon_style tm">
                  <img src="../assets/img/13-下载.png" alt="" />
                </div>
              </div>
            </div>
          </el-header>
          <div class="small_btn">
            <el-row :gutter="20">
              <el-col :span="6"><span>Markdown</span></el-col>
              <el-col :span="6"><span>Code</span></el-col>
              <el-col :span="6" class="icon_flex"
                ><div class="icon_flex">
                  <img src="../assets/img/jia.png" alt="" class="s_img" /><img
                    src="../assets/img/downL.png"
                    alt=""
                    class="s_img s_up"
                  />
                </div>
                <div class="icon_flex">
                  <img src="../assets/img/jia.png" alt="" class="s_img" /><img
                    src="../assets/img/downL.png"
                    alt=""
                    class="s_img"
                  /></div
              ></el-col>
              <el-col :span="6" style="display: flex; justify-content: center"
                ><div class="icon_del">
                  <img src="../assets/img/del.png" alt="" width="100%" /></div
              ></el-col>
            </el-row>
          </div>
          <div class="main_top">
            <div class="main_span" style="margin-top: 10px">
              <img src="../assets/img/play_fill.png" alt="" />
            </div>
            <div style="width: 90%; border: 1px solid #e7e9f1">
              <b-code-editor
                v-model="jsonStr"
                :auto-format="true"
                :smart-indent="true"
                :indent-unit="4"
                :line-wrap="false"
                :lint="false"
                ref="editor"
              ></b-code-editor>
            </div>
          </div>
          <div class="main_bottom">
            <span class="main_span">
              [ <span style="color: #82c156">out</span> ]</span
            >
            <div class="result">
              <pre>(('vbap4albe7974b5c32a6b7667728.),)<br>csv----I'Data.csv]<br>(( vbapfedb7117ef52dfee69e356ce.)1)<br>host:is rpc port:is user:8s   不具备读写，检查是否是活跃状态或者参数是否配置正确<br>write data /tanye/ad4c3cab36f5412cba1e5e854b510cd5/dataSet/vbapfedb7117ef52dfee69e356ce/data/<br>修改数据集json结构--------------------<br><br>修改数据集状态------------------<br>数据集语义化分析------------
              </pre>
            </div>
          </div>
        </el-main>
        <el-footer class="dataFooter" style="height: 30px">
          <div class="footer_left">
            <div class="footer_icon">
              <img src="../assets/img/play_forward_fill.png" alt="" />
            </div>
            <div class="footer_icon">
              <img src="../assets/img/play_fill.png" alt="" />
            </div>
          </div>
          <div class="footer_center">
            <el-input
              v-model="footerInput"
              :readonly="true"
              autocomplete="off"
            ></el-input>
          </div>
          <div class="footer_right">
            <div class="footer_icon">
              <img src="../assets/img/上箭头.png" alt="" />
            </div>
            <div class="footer_icon">
              <img src="../assets/img/重置.png" alt="" />
            </div>
          </div>
        </el-footer>
      </el-container>
      <el-aside width="20%">
        <div class="center_div" style="height: 100%">
          <el-card class="center_card">
            <div slot="header" class="header_card">
              <div class="card_title">
                <span class="mulu">目录</span>
                <el-button
                  @click="resetChecked"
                  icon="el-icon-refresh"
                  type="text"
                >
                </el-button>
              </div>
              <el-button
                style="float: right"
                icon="el-icon-caret-left"
                type="text"
              ></el-button>
            </div>
          </el-card>
          <el-tree
            class="center_tree"
            :data="MLData"
            show-checkbox
            node-key="id"
            ref="tree"
            highlight-current
          >
          </el-tree>
        </div>
      </el-aside>
      <el-aside width="20%">
        <div class="right_div">
          <el-card class="right_card">
            <div slot="header">
              <span>输入数据集列表</span>
              <el-button style="float: right; padding: 3px 0" type="text">
                <i class="el-icon-arrow-down" style="color: black"></i
              ></el-button>
            </div>
            <el-button type="primary" size="100%">添加输入数据集</el-button>
            <el-row :gutter="20">
              <el-col :span="20"
                ><div class="input_flex">
                  <img
                    src="../assets/img/wjj.png"
                    style="margin-left: 10px; width: 18px"
                  />
                  <span style="margin-left: 8px"> {{ inputTitle }}</span>
                </div></el-col
              >
            </el-row>
          </el-card>
          <el-tree
            class="right_tree"
            :data="dataLists"
            node-key="id"
            ref="tree"
            highlight-current
          >
            <div slot-scope="{ data, node }" class="tree_del">
              <div style="display: flex; align-items: center">
                <img :src="data.icon" width="18px" style="margin-right: 5px" />
                <span style="padding-left: 4px">{{ node.label }}</span>
              </div>

              <img
                src="../assets/img/del.png"
                style="margin-left: 5px; width: 15px"
              />
            </div>
            <!-- <div slot-scope="data">
              
            </div> -->
          </el-tree>
        </div>
        <div class="right_div">
          <el-card class="right_card">
            <div slot="header">
              <span>输入数据集列表</span>
              <el-button style="float: right; padding: 3px 0" type="text">
                <i class="el-icon-arrow-down" style="color: black"></i
              ></el-button>
            </div>
            <el-button type="primary" size="100%">添加输入数据集</el-button>
            <el-row :gutter="20">
              <el-col :span="20"
                ><div class="input_flex">
                  <img
                    src="../assets/img/wjj.png"
                    style="margin-left: 10px; width: 18px"
                  />
                  <span style="margin-left: 8px"> {{ inputTitle }}</span>
                </div></el-col
              >
            </el-row>
          </el-card>
          <el-tree
            class="right_tree"
            :data="dataLists2"
            node-key="id"
            ref="tree"
            highlight-current
          >
            <div slot-scope="{ data, node }" class="tree_del">
              <div>
                <img :src="data.icon" width="18px" style="margin-right: 5px" />
                <span style="padding-left: 4px">{{ node.label }}</span>
              </div>

              <img src="../assets/img/del.png" style="width: 15px" />
            </div>
          </el-tree>
        </div>
        <!-- <el-card class="right_card">
          <div slot="header">
            <span>输入数据集列表</span>
            <el-button style="float: right; padding: 3px 0" type="text">
              <i class="el-icon-arrow-down" style="color: black"></i
            ></el-button>
          </div>
          <el-button type="primary" size="100%">添加输入数据集</el-button>
          <el-tree
            class="right_tree"
            :data="dataLists2"
            node-key="id"
            ref="tree"
            highlight-current
          >
            <div
              slot-scope="{ data, node }"
              style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <img :src="data.icon" width="18px" style="margin-right: 5px" />
              <span style="padding-left: 4px">{{ node.label }}</span>
            </div>
          </el-tree>
        </el-card> -->
      </el-aside>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "publishOperator",
  data() {
    var tabs = [
      {
        id: 1,
        val: "算子信息",
        icon: require("../assets/img/suanzixx.png"),
      },
      {
        id: 2,
        val: "发布算子",
        icon: require("../assets/img/fbsz.png"),
      },
      {
        id: 3,
        val: "发布服务",
        icon: require("../assets/img/fbfw.png"),
      },
      {
        id: 4,
        val: "设置",
        icon: require("../assets/img/shezhi.png"),
      },
      {
        id: 5,
        val: "上传文件",
        icon: require("../assets/img/upwj.png"),
      },
      {
        id: 6,
        val: "生成报告",
        icon: require("../assets/img/baogao.png"),
      },
      {
        id: 7,
        val: "保存",
        icon: require("../assets/img/bc.png"),
      },
      {
        id: 8,
        val: "关闭",
        icon: require("../assets/img/gb.png"),
      },
    ];
    var MLData = [
      {
        id: 1,
        label: "users",
        children: [
          {
            id: 10,
            label: "datascience",
            children: [
              {
                id: 100,
                label: "flows",
                children: [
                  {
                    id: 100,
                    label: "2235",
                    children: [
                      {
                        id: 1000,
                        label: "notebook",
                        children: [
                          {
                            id: 10000,
                            label: "notebook.ipynb",
                          },
                          {
                            id: 10001,
                            label: "notebook.py",
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
            ],
          },
        ],
      },
    ];
    var dataLists = [
      {
        id: 1,
        label: "Data",
        icon: require("../assets/img/wjj.png"),
        children: [
          {
            id: 100,
            label: "用户自建算子",
            icon: require("../assets/img/wjj.png"),
            is: 1,
            children: [
              {
                id: 1000,
                label: "用户自建算子",
                icon: require("../assets/img/wjj.png"),
              },
            ],
          },
          {
            id: 101,
            label: "用户分享算子",
            icon: require("../assets/img/wjj.png"),
            is: 1,
            children: [
              {
                label: "用户分享算子",
                icon: require("../assets/img/wjj.png"),
              },
            ],
          },
        ],
      },
    ];
    var dataLists2 = [
      {
        id: 1,
        label: "自定义_note_1",
        icon: require("../assets/img/wjj.png"),
        children: [
          {
            id: 100,
            label: "自定义_note_1-1",
            icon: require("../assets/img/wjj.png"),
            is: 1,
            children: [
              {
                id: 1000,
                label: "自定义_note_1-1-1",
                icon: require("../assets/img/wjj.png"),
              },
            ],
          },
          {
            id: 101,
            label: "自定义_note_1-2",
            icon: require("../assets/img/wjj.png"),
            is: 1,
            children: [
              {
                label: "自定义_note_1-2-1",
                icon: require("../assets/img/wjj.png"),
              },
            ],
          },
        ],
      },
    ];
    const jsonData = `#一*一coding: utf-8 -*-
import data science
import pandas as pd
# Read recipe inputs读取输入数据集
vbap4albe7974b5c32a6b7f67728 =data science. Dataset( "Data" )
vbap4a1be7974b5c32a6b7f67728 df = vbap4a1be7974b5c32a6b767728 . get_ dataframe( )

#用户自定义代码开始
vbapfedb7117ef52dfee69e356cedf= vbap4a1be7974b5c32a6b7f67728df

# Write recipe outputs写入输出数据集
vbapfedb7117ef52dfee69e356ce =data science . Dataset("自定义 note1")
vbapfedb7117ef52dfee69e356ce.write with_ dataframe (vbapfedb7117ef52dfee69e356ce_ df)


#用户自定义代码结束
`;
    return {
      activeName: "python3",
      tabs,
      MLData,
      dataLists,
      dataLists2,
      defaultProps: {
        children: "children",
        label: "label",
      },
      inputTitle: "输入的数据集",
      jsonStr: jsonData,
      footerInput:
        "已用时间  0h:8m:12s   CPU 0%  内存  338.35Mb/1.0G  磁盘容量  500Mb/10G",
    };
  },
  methods: {
    handleClick() {
      if (this.activeName == "python3") {
        this.isActive = true;
      } else {
        this.isActive = false;
      }
    },
    //重置
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
    // 检测json格式
    isJSON(str) {
      if (typeof str == "string") {
        try {
          var obj = JSON.parse(str);
          if (typeof obj == "object" && obj) {
            return true;
          } else {
            return false;
          }
        } catch (e) {
          return false;
        }
      } else if (typeof str == "object" && str) {
        return true;
      }
    },
    goSZ(items) {
      console.log(items);
      if (items.id == 2) {
        // this.$router.push("/DataManagement");
        this.$router.push({ name: "DataManagement" });
      }
    },
    // onSubumit() {
    //   if (!this.isJSON(this.jsonStr)) {
    //     this.$message.error(`json格式错误`);
    //     return false;
    //   }
    //   this.$message.success("json格式正确");
    // },
  },
};
</script>

<style lang="scss" scoped>
.publishOperator {
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #ffffff;
  overflow-y: hidden;
  color: transparent;
}

.left_title {
  display: flex;
  align-items: center;
  line-height: 60px;
  height: 100%;
  button {
    color: black;
    border: none;
    font-weight: bolder;
  }
}
.img_wrapper {
  display: inline-block;
  margin-left: 5px;
  width: 15px;
  height: 15px;
}

.tabs_btn {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .el-button {
    color: #c1c9d5;
    font-size: 0.15rem;
    // line-height: 16px;
  }
}
.top_header {
  border-bottom: 1px solid #e7e9f1;
  .el-row,
  .el-col {
    height: 100%;
  }
}
.icon_flex {
  cursor: pointer;
  padding-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  img {
    width: 100%;
  }
}
.input_flex {
  display: flex;
  align-items: center;
  padding-bottom: 5px;
}
.icon_del {
  cursor: pointer;
  margin-top: 5px;
  width: 20px;
  height: 20px;
  display: flex;
}
.tree_del {
  width: 100%;
  padding-right: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-main {
  background-color: #ffffff;
  color: #333;
}
.el-aside:nth-child(1) {
  // height: 100%;
  color: #333;
}
.right_tree {
  padding-left: 20px;
}
.left_container {
  border-right: 10px solid #82848a;
  .el-header {
    padding-left: 0.1rem;
  }
  .dataMain {
    padding: 0;
    .icon_container {
      width: 400px;
      height: 60px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30px;
        /deep/ button.el-button.el-button--info.el-button--mini {
          padding: 0 0.1rem;
        }
        .icon_style {
          width: 20px;
          height: 20px;
          margin: 0px 8px;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .tm {
          width: 25px;
          height: 25px;
        }
        .ts {
          width: 18px;
          height: 18px;
        }
      }
    }
  }

  .dataFooter {
    display: flex;
    justify-content: space-between;
    div {
      display: flex;
      align-items: center;
    }
    .footer_center {
      flex-grow: 1;
      margin: 0 10px;
      background-color: #575f68;
      /deep/ .el-input__inner {
        background-color: transparent;
        border: none;
        color: #c9c9c9;
      }
    }
    .footer_icon {
      width: 20px;
      height: 20px;
      cursor: pointer;
      margin: 0px 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.card_title {
  display: flex;
  align-items: center;
  height: 40px;
}
.s_img {
  width: 15px;
  height: 15px;
}

.s_up {
  transform: rotate(180deg);
}
.small_btn {
  text-align: center;
  margin-left: 130px;
  margin-bottom: -1px;
  width: 4rem;
  height: 35px;
  line-height: 31px;
  border: 2px solid #edeeed;
  border-radius: 6px;
  // background-color: #62a0f8;
  span {
    padding: 20px;
  }
}
.result {
  width: 90%;
  height: 300px;
  background-color: #edeeed;
  padding: 20px;
  p {
  }
}
.main_top,
.main_bottom {
  display: flex;
}
.main_span {
  display: inline-block;
  width: 80px;
  text-align: center;
  img {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
}
.center_div {
  .center_card {
    border-top: none;
    height: 6%;
    .header_card {
      .el-button img {
        width: 30px;
      }
    }
    .header_card {
      display: flex;
      justify-content: space-between;
      align-content: center;

      /deep/.el-button--text {
        color: #82848a;
      }
    }
    /deep/.el-card__header {
      padding: 0;
      height: 40px;
      i {
        font-size: 0.15rem;
      }
    }
    /deep/ .el-card__body {
      padding: 0.1rem;
    }
    .mulu {
      padding-left: 10px;
      font-size: 0.15rem;
      padding-right: 15px;
    }
  }
  .center_tree {
    height: 94%;
    border-right: 10px solid #e7e9f1;
    overflow-x: scroll;
    overflow: scroll;
  }
}
// .input_title {
//   width: 18px;
//   height: 18px;
//   img {
//     width: 100%;
//     height: 100%;
//   }
// }
.right_div {
  height: 46vh;
  /deep/.right_tree {
  }
}
.right_card {
  // border-top: none;
  border-bottom: none;
  /deep/.el-card__header {
    background-color: #f1f4f5;
  }
  /deep/.el-card__body {
    padding: 0;
    padding-top: 20px;
  }
  /deep/button.el-button.el-button--primary.el-button--100\% {
    margin-bottom: 10px;
    margin-left: 5%;
    width: 90%;
  }
  // /deep/.el-tree-node {
  //   // height: 0.5rem;
  // }
  /deep/.el-tree-node__expand-icon {
    color: black;
  }
  /deep/ .el-button--primary {
    background-color: #62a0f8;
    border-color: #62a0f8;
  }
  .el-tree {
    border-right: none;
  }
}
.el-aside {
  /deep/.el-tree-node__content {
    height: 0.4rem;
    align-items: center;
  }
}
.img_btn {
  width: 20px;
  height: 20px;
}
</style>